<template>
	<div id="register">
		<mainHeader></mainHeader>
		<div id="mai-register">
			<div class="wrapper">
				<div class="container">
					<h1>Join us</h1>
					<form class="form">
						<p id="tp" :class="states == 200?'bg-success':'bg-error'" v-if='hide'>{{tipsMsg}}</p>
						<input type="text" placeholder="手机号" v-model="telephone">
						<input type="password" placeholder="密码" v-model="password">
						<input type="text" class="checkput" placeholder="验证码" v-model="checkCode">
						<button class="checkBtn" style="width: 90px;" v-show="show" @click="send()">发送</button>
						<button class="checkBtn1" v-show="!show" style="width: 140px;">重发({{count}}秒)</button>
						<button id="regist-button" style="margin-left: 7px;" @click="register()">注册</button>
					</form>
				</div>
				<ul class="bg-bubbles">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>

			</div>
		</div>
		<mainFooter class="mainFooter"></mainFooter>
	</div>
</template>
<script>
	import mainHeader from '@/components/mainHeader'
	import mainFooter from '@/components/mainFooter'
	import bus from '../bus.js'
	export default {
		name: 'detail',
		data() {
			return {
				hide:false,
				password: '',
				telephone: '',
				checkCode:'',
				show: true,
				count: '',
				timer: null,
				tipsMsg:'',
				states:''
			}
		},
		components: {
			mainHeader,
			mainFooter
		},
		mounted() {
			document.getElementsByTagName('body')[0].style.overflow = 'hidden';
		},
		methods: {
			send() {
				if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.telephone))) {
					this.states = 400;
					this.hide = true;
					this.tipsMsg = "手机号码格式有误，请重新填写";
					var _this = this;
					setTimeout(function(){
						_this.hide = false;
						},2000)
					return;
				}
				//请求短信发送接口
				this.$axios.get("/regist/send/" + this.telephone, {}).then(res => {
					console.log(res);
				});
				console.log(this.telephone);
				const TIME_COUNT = 60;
				if(!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if(this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000)
				}
			},
			register() {
				console.log(this.telephone);
				console.log(this.password);
				console.log(this.checkCode);
				var _this = this;
				this.$axios.post("/regist/add", {
					"telephone":_this.telephone,"checkCode":_this.checkCode,"password":_this.checkCode
				}).then(res => {
					console.log(res);
					//路由跳转到登录页
					_this.states = res.data.status; 
					_this.hide = true;
					if(res.data.status == 200){
						_this.tipsMsg = "注册成功 3 秒后跳转登录页";
						var time;
						time = setInterval(function(){
							 clearInterval(time);
							_this.$router.push({name:'login',params:{}});
						}, 3000);
					}else{
						_this.tipsMsg = res.data.msg;
						setTimeout(function(){
							_this.hide = false;
						},2000)
					}
				});
			}
		},
		computed: {

		}

	}

	$('#login-button').click(function(event) {
		event.preventDefault();
		$('form').fadeOut(500);
		$('.wrapper').addClass('form-success');
	});
	
	
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import url("../../static/css/styles.css");
	#register {
		width: 100%;
		padding-top: 100px;
	}
	
	body,
	td,
	th {
		font-family: "Source Sans Pro", sans-serif;
	}
	
	body {
		background-color: #2B2B2B;
	}
	
	.mainFooter {
		background: #FF4F01;
		position: relative;
		clear:both; 
		margin-top: 1000px;
	}
	
	.wrapper {
		height: 1200px;
	}
	
	.wrapper input {}
	
	.checkBtn {
		position: absolute;
		top: 135px;
		left: 335px;
	}
	.checkBtn1 {
		position: absolute;
		top: 135px;
		left: 285px;
	}
	.checkput {
		margin: 0 auto 10px 175px;
		width: 100px !important;
	}
	#tp{
		position: fixed;
		left: 0;
		top: 102px;
		right: 0;
		border-bottom: 0;
		margin: auto;
		z-index: 999999;
		width: 240px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		font-size: 16px;
		color: #fff;
	}
	.bg-success{
		background: #409eff;
	}
	.bg-error{
		background: #F56C6C;
	}
</style>